<template>
	<view>

		<u-sticky>

			<!-- 标签控件 -->
			<view class="tab-swiper">
				<u-tabs-swiper activeColor="#1573FF" ref="tabs" :list="list" :current="current" @change="tabChange"
					:is-scroll="false"></u-tabs-swiper>
			</view>

		</u-sticky>



		<mescroll-body ref="mescrollRef222" @init="mescrollInit" @down="downCallback" @up="upCallback">



			<view class="item" @click="goDetail(item)" v-for="(item, index) in listdata" :key="index">


				<view style="display: flex;position: relative;flex-direction: column;">
					
					<view style="display: flex;align-items: center;justify-content: space-between;margin: 20rpx;">
						<text style="font-size: 30rpx;font-weight: bold;" :style="{
							color:0==current?'#a7a7a7':'#333'
						}">{{item.msgTitle}}</text>
						<text style="color: #a7a7a7;font-size: 24rpx;">{{item.createTime}}</text>
					</view>
					
					<view class="html-content">
						<rich-text :nodes="item.msgContent"></rich-text>
					</view>

				</view>

			</view>
		</mescroll-body>

	</view>
</template>

<script>
	import lrNavigationBar from "../../components/global/lr-navigation-bar.vue"
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";

	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				list: [{
						name: '已读',
						// num: 0
						// count: 1
					},
					{
						name: '未读',
						// count: 12345
						// num: 0
					},
				],
				current: 0,
				pageNo: 1,
				listdata: [],
			}
		},
		components: {
			lrNavigationBar
		},
		onShow() {
			this.getCountData();

			this.getListData();
		},

		methods: {
			//切换标签
			tabChange(index) {
				console.log('标签切换了', index);
				this.current = index;

				this.pageNo = 1;
				this.getListData();
			},

			getCountData() {
				this.$u.api.getmessageApiMsgTypeData({

				}).then(res => {
					this.list[0].name = res.isReadCount;
					this.list[1].name = res.noReadCount;
				})
			},

			getListData() {

				let type = 2;
				if (this.current == 0) {
					type = 2;
				} else {
					type = this.current;
				}

				this.$u.api.getmessageApiListMsgData({
					msgStatus: type,
					pageNo: this.pageNo
				}).then(res => {
					console.log('停止刷新');
					if (this.pageNo == 1) {

            this.listdata = [];
          }
          this.listdata = this.listdata.concat(res);
          this.mescroll.endSuccess(res.length);
        }).catch(() => {
					this.mescroll.endErr();
				})
			},

			upCallback(page) {
				console.log("触发了上拉加载" + page);

				this.pageNo = page.num;
				this.getListData();
			},

			goDetail(item) {
				uni.navigateTo({
					url: '/pagesA/message/message-detail?id=' + item.msgConfigId
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.tags {
		margin-top: 15rpx;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;

		.tag {
			color: #fff;
			font-size: 24rpx;
			padding: 3rpx 15rpx;
			margin-right: 10upx;
			background-color: #1573FF;
			border-radius: 5rpx;
		}

		.tag:nth-child(even) {
			background: #f17559;
		}
	}

	.state {
		position: absolute;
		top: 20rpx;
		left: 0;
		color: #fff;
		z-index: 9;
		padding: 3rpx 10rpx;
		text-align: center;
		border-radius: 0 90rpx 90rpx 0;
		font-size: 24rpx;
		white-space: nowrap;
	}
	
	.html-content {
		font-size: 24rpx;
		color: #A7A7A7;
		margin: 0 20rpx 8rpx;
	
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1; //两行
	}
	
</style>
